---
title: Badge
description: Displays a badge or a component that looks like a badge.
component: Badge
---

<LiveComponent language="tsx">
{`
  import { Badge } from "@pipecat-ai/voice-ui-kit";

  <Badge>Badge</Badge>
`}
</LiveComponent>


<TypeTable
  className="text-sm"
  type={{
    color: {
      description: "The color scheme of the badge",
      type: '"primary" | "secondary" | "destructive" | "active" | "inactive" | "warning" | "agent" | "client"',
      required: false,
      default: '"primary"',
    },
    variant: {
      description: "The visual style variant of the badge",
      type: '"default" | "outline" | "filled" | "elbow" | "bracket"',
      required: false,
      default: '"default"',
    },
    size: {
      description: "The size of the badge",
      type: '"sm" | "md" | "lg"',
      required: false,
      default: '"md"',
    },
    uppercase: {
      description: "Whether to display text in uppercase",
      type: "boolean",
      required: false,
      default: "false",
    },
    buttonSizing: {
      description: "Whether to use button sizing utilities",
      type: "boolean",
      required: false,
      default: "false",
    },
    rounded: {
      description: "The border radius of the badge",
      type: '"size" | "none" | "sm" | "md" | "lg" | "full"',
      required: false,
      default: '"size"',
    },
    asChild: {
      description: "Whether to render as a different element",
      type: "boolean",
      required: false,
      default: "false",
    },
    className: {
      description: "Additional CSS classes to apply",
      type: "string",
      required: false,
      default: "undefined",
    },
  }}
/>

---

## Usage

### Colors

<LiveComponent language="tsx">
{`
    import { Badge } from "@pipecat-ai/voice-ui-kit";

    <div className="flex flex-row gap-2 w-full justify-center">
        <Badge color="primary">Primary</Badge>
        <Badge color="secondary">Secondary</Badge>
        <Badge color="destructive">Destructive</Badge>
        <Badge color="warning">Warning</Badge>
        <Badge color="active">Active</Badge>
        <Badge color="inactive">Inactive</Badge>
        <Badge color="agent">Agent</Badge>
        <Badge color="client">Client</Badge>
    </div>
`}
</LiveComponent>

### Variant

<LiveComponent language="tsx">
{`
    import { Badge } from "@pipecat-ai/voice-ui-kit";

    <div className="flex flex-col gap-2 w-full">
        <div className="flex flex-row gap-2 w-full justify-center">
            <Badge variant="outline">Outline</Badge>
            <Badge variant="filled">Filled</Badge>
            <Badge variant="elbow">Elbow</Badge>
            <Badge variant="bracket">Bracket</Badge>
        </div>
        <div className="flex flex-row gap-2 w-full justify-center">
            <Badge variant="outline" color="secondary">Outline</Badge>
            <Badge variant="filled" color="secondary">Filled</Badge>
            <Badge variant="elbow" color="secondary">Elbow</Badge>
            <Badge variant="bracket" color="secondary">Bracket</Badge>
        </div>
        <div className="flex flex-row gap-2 w-full justify-center">
            <Badge variant="outline" color="destructive">Outline</Badge>
            <Badge variant="filled" color="destructive">Filled</Badge>
            <Badge variant="elbow" color="destructive">Elbow</Badge>
            <Badge variant="bracket" color="destructive">Bracket</Badge>
        </div>
        <div className="flex flex-row gap-2 w-full justify-center">
            <Badge variant="outline" color="warning">Outline</Badge>
            <Badge variant="filled" color="warning">Filled</Badge>
            <Badge variant="elbow" color="warning">Elbow</Badge>
            <Badge variant="bracket" color="warning">Bracket</Badge>
        </div>
        <div className="flex flex-row gap-2 w-full justify-center">
            <Badge variant="outline" color="active">Outline</Badge>
            <Badge variant="filled" color="active">Filled</Badge>
            <Badge variant="elbow" color="active">Elbow</Badge>
            <Badge variant="bracket" color="active">Bracket</Badge>
        </div>
        <div className="flex flex-row gap-2 w-full justify-center">
            <Badge variant="outline" color="inactive">Outline</Badge>
            <Badge variant="filled" color="inactive">Filled</Badge>
            <Badge variant="elbow" color="inactive">Elbow</Badge>
            <Badge variant="bracket" color="inactive">Bracket</Badge>
        </div>
        <div className="flex flex-row gap-2 w-full justify-center">
            <Badge variant="outline" color="agent">Outline</Badge>
            <Badge variant="filled" color="agent">Filled</Badge>
            <Badge variant="elbow" color="agent">Elbow</Badge>
            <Badge variant="bracket" color="agent">Bracket</Badge>
        </div>
        <div className="flex flex-row gap-2 w-full justify-center">
            <Badge variant="outline" color="client">Outline</Badge>
            <Badge variant="filled" color="client">Filled</Badge>
            <Badge variant="elbow" color="client">Elbow</Badge>
            <Badge variant="bracket" color="client">Bracket</Badge>
        </div>
    </div>
`}
</LiveComponent>

### Sizes

<LiveComponent language="tsx">
{`
    import { Badge } from "@pipecat-ai/voice-ui-kit";

    <div className="flex flex-row gap-2 w-full justify-center">
        <Badge size="sm">SM</Badge>
        <Badge size="md">MD</Badge>
        <Badge size="lg">LG</Badge>
    </div>
`}
</LiveComponent>

#### Button Sizing

Make the badge size like a button by setting the `buttonSizing` prop to `true`.

<LiveComponent language="tsx">
{`
    import { Badge, Button } from "@pipecat-ai/voice-ui-kit";

    <div className="flex flex-row gap-2 w-full justify-center">
        <Badge buttonSizing size="md">Button sizing</Badge>
        <Button variant="outline" size="md">Button for reference</Button>
    </div>
`}
</LiveComponent>

### Rounded

<LiveComponent language="tsx">
{`
    import { Badge } from "@pipecat-ai/voice-ui-kit";

    <div className="flex flex-row gap-2 w-full justify-center">
        <Badge color="secondary" rounded="size">
            Size (matches size prop)
        </Badge>
        <Badge color="secondary" rounded="sm">
            SM
        </Badge>
        <Badge color="secondary" rounded="md">
            MD
        </Badge>
        <Badge color="secondary" rounded="lg">
            LG
        </Badge>
        <Badge color="secondary" rounded="full">
            Full
        </Badge>
        <Badge color="secondary" rounded="none">
            None
        </Badge>
    </div>
`}
</LiveComponent>


### Progress and Icon Badges

<LiveComponent language="tsx">
{`
    import { Badge, Progress, TriangleAlertIcon } from "@pipecat-ai/voice-ui-kit";

    <div className="flex flex-col gap-2 w-full">
        <div className="flex flex-row gap-2 w-full justify-center">
            <Badge>
                <Progress percent={50} className="h-[3px]" />
                Badge with progress
            </Badge>
            <Badge>
                <TriangleAlertIcon />
                Badge with icon
            </Badge>
        </div>
        <div className="flex flex-row gap-2 w-full justify-center">
            <Badge size="lg">
                <Progress percent={50} className="h-[3px]" size="lg"/>
                Badge with progress
            </Badge>
            <Badge size="lg">
                <TriangleAlertIcon />
                Badge with icon
            </Badge>
        </div>
    </div>
`}
</LiveComponent>